<template>
	<div class="d-module-title">
		<b>审批信息</b>
	</div>

	<a-timeline style="margin-top: 25px">
		<a-timeline-item v-for="(progressItem, progressIndex) in approvalData" :key="progressItem.id">
			<template v-if="progressItem.type == '0'">
				<a-tag color="processing" style="border-radius: 12px; margin-bottom: 10px">发起申请</a-tag>
				<a-descriptions layout="vertical" bordered size="small">
					<a-descriptions-item>
						<template #label>
							<div class="flex-space-between">
								<span>发起人：{{ progressItem.initiatorName }}</span>
								<span>{{ progressItem.operationDate }}</span>
							</div>
						</template>
						<a-row style="line-height: 30px">
							<a-col :span="24">
								<a-space :size="10">
									<span class="default-color">抄送人(已抄送{{ progressItem.sendPersonList.length }}人)</span>
									<span v-if="progressItem.sendPersonList.length - progressItem.readCount > 0" class="warning-color">{{ progressItem.sendPersonList.length - progressItem.readCount }}人未读</span>
								</a-space>
							</a-col>
							<a-col :span="24">
								<a-tag v-for="(item, index) in progressItem.sendPersonList" :key="item.id" color="#EFF1F4" style="color: #4e5969">
									<svg-icon :icon-class="`icon-contract-approval${item.readStatus ? '1' : '0'}`" />
									{{ item.name }}
								</a-tag>
							</a-col>
						</a-row>
					</a-descriptions-item>
				</a-descriptions>
			</template>
			<template v-else>
				<template v-if="progressItem.nodeStatus != 4">
					<template v-for="(item, index) in progressItem.approvalPersonList" :key="item.id">
						<a-tag :color="approvalStatusList[item.approvalStatus].color" style="border-radius: 12px; margin-bottom: 10px">{{ approvalStatusList[item.approvalStatus].name }}</a-tag>
						<a-descriptions layout="vertical" bordered size="small" style="margin-bottom: 10px">
							<a-descriptions-item>
								<template #label>
									<div class="flex-space-between">
										<span>审批人：{{ item.name }}</span>
										<span>{{ item.approvalTime }}</span>
									</div>
								</template>
								<a-row style="line-height: 30px">
									<a-col :span="24">
										<a-space :size="10">
											<span class="default-color">审批类型：</span>
											<span>{{ progressItem.approvalType == 1 ? '或签' : '会签' }}</span>
										</a-space>
									</a-col>
									<a-col :span="24" v-if="[2, 3].includes(item.approvalStatus)">
										<a-space :size="10">
											<span class="default-color">备注：{{ item.approvalComment }}</span>
										</a-space>
									</a-col>
								</a-row>
							</a-descriptions-item>
						</a-descriptions>
					</template>
					<a-descriptions layout="vertical" bordered size="small" style="margin-bottom: 10px">
						<a-descriptions-item>
							<template #label>
								<div class="flex-space-between">
									<span>抄送人</span>
								</div>
							</template>
							<a-row style="line-height: 30px">
								<a-col :span="24">
									<a-space :size="10">
										<span class="default-color">抄送人(已抄送{{ progressItem.sendPersonList.length }}人)</span>
										<span v-if="progressItem.sendPersonList.length - progressItem.readCount > 0" class="warning-color">{{ progressItem.sendPersonList.length - progressItem.readCount }}人未读</span>
									</a-space>
								</a-col>
								<a-col :span="24">
									<a-tag v-for="(item, index) in progressItem.sendPersonList" :key="item.id" color="#EFF1F4" style="color: #4e5969">
										<svg-icon :icon-class="`icon-contract-approval${item.readStatus ? '1' : '0'}`" />
										{{ item.name }}
									</a-tag>
								</a-col>
							</a-row>
						</a-descriptions-item>
					</a-descriptions>
				</template>
				<template v-else>
					<a-tag color="default" style="border-radius: 12px; margin-bottom: 10px">已撤销</a-tag>
				</template>
			</template>
		</a-timeline-item>
	</a-timeline>
</template>

<script setup lang="ts">
	const props = defineProps<{
		approvalData: any
	}>()

	const approvalStatusList: any = {
		0: {
			name: '待审批',
			color: 'default'
		},
		1: {
			name: '审批中',
			color: 'processing'
		},
		2: {
			name: '已驳回',
			color: 'error'
		},
		3: {
			name: '已通过',
			color: 'success'
		},
		4: {
			name: '已撤销',
			color: 'default'
		}
	}
</script>

<style lang="less" scoped></style>
